<template>
  <div class="login-wrap">
    <div class="ms-login">
        <el-form label-position="left" :model="addForm" :rules="rules" ref="addForm" label-width="0px" class="demo-ruleForm login-container">
            <h3 class="title">线上教育平台后端注册</h3>

            <el-form-item prop="loginname">
                <el-input size="small" v-model="addForm.loginname" auto-complete="off" placeholder="請輸入登錄賬戶"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input size="small" v-model="addForm.password" auto-complete="off" placeholder="請輸入登錄密碼"></el-input>
            </el-form-item>

            <el-form-item prop="realname">
                <el-input size="small" v-model="addForm.realname" auto-complete="off" placeholder="請輸入真實姓名"></el-input>
            </el-form-item>

            <el-form-item prop="gender">
                <el-select v-model="addForm.gender" placeholder="請選擇性別">
                    <el-option key="男" value="男" ></el-option>
                    <el-option key="女" value="女" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="email">
                <el-input size="small" v-model="addForm.email" auto-complete="off" placeholder="請輸入電子郵箱"></el-input>
            </el-form-item>

            <el-form-item prop="mobile">
                <el-input size="small" v-model="addForm.mobile" auto-complete="off" placeholder="請輸入聯係方式"></el-input>
            </el-form-item>

            <el-form-item prop="mobile">
                <el-input size="small" v-model="addForm.address" auto-complete="off" placeholder="請輸入聯係地址"></el-input>
            </el-form-item>

            <el-form-item prop="role">
                <el-select v-model="addForm.role" placeholder="请选择權限狀態">
                    <el-option key="卖家" value="卖家" >卖家</el-option>
                    <el-option key="买家" value="买家" >买家</el-option>
                </el-select>
            </el-form-item>

            <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="submitForm()" :loading="logining">註冊</el-button>
            </el-form-item>

            <el-form-item prop="password">
                <router-link :to="{path:'login'}">
                    <el-button type="text" class="button" style="position: absolute;right: 0px">已有账户，去登录！</el-button>
                </router-link>
            </el-form-item>
        </el-form>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'login',
        data() {
            return {
                //定义loading默认为false
                logining: false,
                // 记住密码
                rememberpwd: false,

                addForm: {
                    loginname: '',
                    password: '',
                    realname: '',
                    gender: '女',
                    email: '',
                    mobile: '',
                    address: '',
                    role: '买家',
                    sfjy: 0,
                },
                //rules前端验证
                rules: {
                    loginname: [{ required: true, message: '請輸入账号', trigger: 'blur' }],
                    password: [{ required: true, message: '請輸入密码', trigger: 'blur' }],
                }
            }
        },
        // 创建完毕状态(里面是操作)
        created() {

        },
        // 里面的函数只有调用才会执行
        methods: {

            submitForm(){

                const _this = this;

                this.addForm.role = this.addForm.role=='买家'?3:2;

                axios.post(localStorage.getItem("globalUrl") + "login/add",this.addForm).then(function(){

                    _this.$router.push({path: '/login'})

                    _this.$message({
                        type: 'success',
                        message: '註冊成功!'
                    });

                });


            }



        }
    }
</script>

<style scoped>
.login-wrap {
  background-color: #42B983;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  position: relative;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 300px;
  height: 700px;
  line-height: 30px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ccc;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
}
</style>
